<script setup lang="ts">
import {inject, onMounted,  Ref, ref } from 'vue';
import {ElMessage} from 'element-plus'
import { isNull } from 'lodash';
const axios: any = inject("axios")

const messages: Ref<{
  id: number;
  comment: string;
  answer: string;
  date: string;
}[]> = ref([])


const textarea = ref('')

const addMessage= async()=>{
  if(textarea.value.length==0)
  {
    ElMessage.error('请输入留言后，回车接交')
    return;
  }

  let result = await axios.post(`/message/add`,{comment:textarea.value});
  if(result.data.code == 200){
    ElMessage({
    message: '添加成功',
    type: 'success',
  })
  }else{
    ElMessage.error('添加失败')
  }
  onload()
  textarea.value=""
}

onMounted(() => {
  onload()
})

const onload = async () => {
  let result = await axios.get(`/message/list`);

  if (result.data.code == 200) {
    messages.value = result.data.data.reverse();
  }
}




</script>

<template>
  <div class="page">
    <div class="logo">
     <div>小黄人留言板</div>
     <input v-model="textarea" rows="2" type="textarea" autofocus="true" placeholder="请写入留言,回车提交" @keyup.enter="addMessage"/>
    </div>

    <div class="message">
      <!-- <div class="message-box box">
        <div class="comment">留言</div>
        <div class="answer">回答</div>
        <div class="date">2021.1.1</div>
      </div> -->

      <div v-for="(message,index) in messages" class="message-box box">
        <div class="message-box box">
          <div class="comment">{{ message.comment }}</div>
          <div class="answer" v-show="message.answer">回答:{{ message.answer }}</div>
          <div class="date">{{ messages.length-index }}# {{ message.date }}</div>
        </div>
      </div>

    </div>
  </div>

</template>

<style scoped lang="scss">
.page {
  width: 90%;
  margin: 0 auto;
}

.logo {
  margin: 50px auto;

  img {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 200px;
  }
  
  
img {
  will-change: filter;
}
img:hover {
  filter: drop-shadow(0 0 2em #0bb5e9aa);
}
img.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

  div {
    margin: 5px;
    font-size: 50px;
    text-align: center;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, rgb(76, 230, 130), #26bbe0, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    //background-clip: text;
  }

  text-align: center;

}

.message {
  width: 100%;
}

.message-box {
  position: relative;
  margin: 10px auto;
  width: 100%;
}

.comment {
  font-size: 25px;
  text-align: center;
  font-weight: bold;
}

.answer {
  margin: 5px 50px;
  font-size: 15px;
}


.date {
  text-align: right;
  margin-right: 50px;
  right: 50px;
  bottom: 30px;
  font-size: 15px;
}
input  {
  width: 90%;
  font-size: 30px;
  text-align: center;
  margin-right: 5px;
}
</style>
